<template>
  <div>
    <!-- 图片盒子 -->
  <div id="img_box" class="img_box" @click="choseType">
    <van-image width="50vw" height="auto" v-lazy="item" :lazyLoad="true" v-for="(item, i) in list" :key="i" :src="item" />
  </div>
  <!-- 操作界面 -->
  <div class="nav" v-if="isShow">
    <!-- 回退按钮 -->
   <div class="back" @click="back">
    <img src="./../../assets/return-details.png" alt="">
   </div>
   <!-- 当前在看的漫画是哪一章 -->
   <div class="morezj">
   <van-button round color="#fb7299" @click="more" type="info">
   {{json.num && json.num.length > 14 ?  json.num.substring(0, 14) + ".."
            : json.num}}
   </van-button>
   </div>
   <!-- 上一话 下一话 -->
    <div class="nextZj">
     <van-button round color="#000" type="info" @click="prevGet">上一话</van-button>
     <van-button round  color="#000" type="info" @click="nextGet">下一话</van-button>
   </div>
    <!-- 选择章节折叠层 -->
  <van-popup v-model="popup" @close="cancle" :duration="0.2" round position="bottom" class="popupClass">
  <div>
   <van-row>
   <van-col span="4" v-for="(item,i) in mhlist" :key="i" >
    <div class="list_box">
   <!-- <div class="list_box">
   <div :class="index === i ? 'spanactive' : 'span'" @click="pushbook">
     {{item.tit}}
   </div>
   </div> -->
    <router-link :to="{
                  path: '/detail',
                  query: { url: item.url, num: item.num },
                }" :class="index == i ? 'spanactive' : 'span'"  @click.native="goDetail(item)">{{ item.tit }}</router-link>
    </div>
   </van-col>
  </van-row>
  </div>
  </van-popup>
     <!-- 遮罩层 防止请求的时候点击 -->
    <van-overlay :show="isShowMark" />
  </div>
 
  </div>
</template>

<script>
import { Toast} from 'vant';
import popupMixin from './popupMixin';
export default {
  mixins:[popupMixin],
   data(){
    return {
      list:[],//图片列表
      json:{},//当前章节
      mhlist:[],//当前漫画的所有章节的列表
    }
   },
   methods: {
   async getData()
     {
       let {url} = this.json
      this.list = await this.getList(url)
     },
        getPrevUrl()
   {
     let { url } = this.json
     let list = JSON.parse(window.sessionStorage.getItem('mhList'))
     let prevJson = null
     list.forEach((item,index) => {
        if(url === item.chapterId)
        {
          if(index -1 < 0) return false
          prevJson = 
          {
            url:list[index -1].chapterId,
            num:list[index -1].title,
          }
        }
     });
        if(prevJson === null)
     {
      return false
     }else
     {
      return prevJson
     }
   },
    
   //上一章
   prevGet()
   {
     if(!this. getPrevUrl())
     {
      Toast('没有上一章')
      return
     }
     this.json = this.getPrevUrl()
     this.getData()
   },
   //下一章
   getNextUrl()
   {
     let {url} = this.json
     let list = JSON.parse(window.sessionStorage.getItem('mhList'))
     let NextJson = null
     list.forEach((item,index) =>{
      if(url === item.chapterId )
      {
        if(index + 1 > list.length)
        {
          return false
        }
       NextJson = 
       {
        url:list[index + 1].chapterId,
        num:list[index + 1].title
       }
      }
     })
    if(NextJson === null)
    {
      return false
    }else
    {
      return NextJson
    }
   },
   nextGet()
   {
    this.json = this.getNextUrl()
    this.getData()
   }
   },
 
  
   created()
   {
    let { url, num } = this.$route.query
    this.json = {
      url: url,
      num: num,
    }
    this.getData()
   }
  
}
</script>

<style lang="less" scoped>
@import url('./detail.less');
.spanactive{
  display: inline-block;
  width: 100%;
  padding: 5px 2px;
  box-sizing: border-box;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  color: #323233;
  background-color:rgb(236, 73, 100);
  border: 1px solid #ebedf0;
  border-radius: 5px;
}
</style> 